import React from 'react';
import * as Select from '@radix-ui/react-select';
import styles from './index.module.scss';
import classNames from 'classnames';
import { update } from '@/utils/immutableUtil';
import _ from 'lodash';
class Comp extends React.Component {
  state = {
    selectedVal: null,
    list: [
      {
        id: 1,
        text: 'Login Page',
        icon: 'icon-a-AvaliablePlugins',
        value:
          'Create a modern, responsive login page for a fictional SaaS company.',
      },
      {
        id: 2,
        text: 'Clone Screenshot',
        icon: 'icon-a-QuickCommands',
        value:
          'Please recreate the UI shown in the attached screenshot as accurately as possible.',
      },
    ],
  };
  shouldComponentUpdate = (np, ns) => update.call(this, np, ns);
  render() {
    const { selectedVal, list } = this.state;

    const availablePlugins = list;

    return (
      <div className={styles.container}>
        <Select.Root value={selectedVal} onValueChange={(value)=>{
          var item =  _.find(this.state.list,{id:value})
          this.props.onValueChange(item)
        }}>
          <Select.Trigger
            className={classNames(styles.trigger, {
              [styles.open]: true,
            })}
            aria-label="Select plugin"
          >
            <div className={styles.triggerContent}>
              <div className={styles.pluginIcon}>
                <i className="iconfont icon-a-QuickCommands"></i>
              </div>
              <div className={styles.title}>Quick Commands</div>
            </div>
          </Select.Trigger>

          <Select.Portal>
            <Select.Content
              className={styles.content}
              position="popper"
              sideOffset={8}
              align="center"
            >
              <Select.Viewport>
                <div className={styles.pluginRow}>
                  {availablePlugins.map((item) => (
                    <Select.Item
                      key={item.id}
                      value={item.id}
                      className={classNames(styles.item, {
                        [styles.selected]: selectedVal === item.id,
                      })}
                    >
                      <div className={styles.pluginName}>{item.text}</div>
                    </Select.Item>
                  ))}
                </div>
              </Select.Viewport>
            </Select.Content>
          </Select.Portal>
        </Select.Root>
      </div>
    );
  }
}

export default Comp;
